<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="demodiv">
  <p id="p1">我会被替换</p>
  <button onclick="sc()">点我删除</button>
  <button onclick="dw()">点我替换我会被替换</button>
</div>

<h2>喜欢的水果</h2>
<button onclick="dwfun()">点我复制</button>
<input id="b1" type="button" value="增加一幅图片" onclick="fun()" />
<input id="b2" type="button" value="复制" onclick="funa()" />
<input id="b3" type="button" value="获取第1张路径" onclick="funb()" />
<br />
<img src="../../img/4.26/sixty1.jpg" id="sixty1" alt="水果" />
<img src="../../img/4.26/sixty2.jpg" id="sixty2" alt="果篮" />
<script>
  // innerHTML与innerText插入会替换容器原始的所有内容
  /*var newhtml = "我是替换内容";
  var newhtmla = "<h1>我是替换内容</h1>";
  document.getElementsByTagName("p")[0].innerHTML = newhtml;
  document.getElementsByTagName("p")[0].innerHTML = newhtmla;
  document.getElementsByTagName("p")[0].innerText = newhtmla;
  document.getElementsByTagName("p")[0].innerText = "我是innerText替换内容";
  document.getElementsByTagName("p")[0].innerText = "<span>innerText替换内容会把标签也显示</span>";*/

 // 元素对象的其他操作:
 //  1.创建元素对象:createElement()
 //  语法:document.createElement("你要创建的元素名称");
  var newdiv = document.createElement("div");
  var newp = document.createElement("p");
  newdiv.innerHTML="<h1>新插入的哦</h1>";
  newp.innerText="我是新插入到前面的的";
  //  4.插入:
  //  4-1指定元素内部的最后面插入:appendChild()
  // 语法:在哪里插入.appendChild(插入的内容);
  document.getElementById("demodiv").appendChild(newdiv);
  // 4-2指定元素内部的最前面插入:insertBefore()
  // 语法:在哪里插入.insertBefore(插入的内容,在谁前面插);
  document.getElementById("demodiv").insertBefore(newp,document.getElementById("p1"));


  // 练习:
  function dwfun() {
    //  2.复制(克隆):cloneNode()
 //  语法:要复制的内容.cloneNode(false);(true表示全部复制,默认为false,只复制父级)
  var newh2 = document.getElementsByTagName("h2")[0];
    var newcn = newh2.cloneNode(true);
  document.getElementById("sixty1").appendChild(newcn);
  }

  function dw() {
  // 创建替换对象
  var newimg=document.createElement("img");
  newimg.setAttribute("src","../../img/4.26/1.jpg");
  //  3.替换:replaceChild()
 //  语法:在什么里面替换.replaceChild(替换的新内容,把谁替换了);
  document.getElementById("demodiv").replaceChild(newimg,document.getElementById("p1"));
  }

  // 增加一张图片:
  function fun() {
    var img1 = document.createElement("img");
    img1.setAttribute("src","../../img/4.26/newimg.jpg");
    // document.getElementsByTagName("body")[0].appendChild(img1);
  document.body.insertBefore(img1,document.getElementById("sixty1"))
  }
  // 复制最后一张图哦:
  function funa() {
    var img2 = document.getElementById("sixty2");
    var cn = img2.cloneNode();
    document.body.appendChild(cn);
  }
  // 获取第1张图片路径:
  function funb() {
    alert(document.getElementById("sixty1").getAttribute("src"));

  }
  //  4.插入:
  //  4-1指定元素内部的最后面插入:appendChild()
  // 语法:在哪里插入.appendChild(插入的内容);
  // 4-2指定元素内部的最前面插入:insertBefore()
  // 语法:在哪里插入.insertBefore(插入的内容,在谁前面插);

  // 5.删除:removeChild()
  // 语法:在哪里删除.removeChild(删除的内容);
  function sc(){
    var newp1 = document.getElementById("p1");
  document.getElementById("demodiv").removeChild(newp1);
  }
</script>
</body>
</html>
